<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>4-3 组件参数校验与非 props 特性</title>
	<script type="text/javascript" src="../../vue.js"></script>
</head>
<body>
	<div id='root'>
		<!-- <child content="hello world"></child> -->
		<!-- 
			使用v-bind:content传值,如果是字符串需要加引号
		 -->
		<child content="hello world"></child>
	</div>
	<script type="text/javascript">
		Vue.component('child',{
			/*props:['content'],*/

			//组件参数校验
			/*props:{
				content:[String,Number]
			},*/

			/**
			 * 非 props 特性:即父组件传递值到子组件,子组件不接收时,去页面观看dom有哪些特征
			 */

			props:{
				content:{
					type:String, 	//数据类型
					required:false,  //是否必须
					default:'默认值为你好!', //默认值
					validator:function(value){
						return value.length > 5  //字符串内容必须大于5
					}
				}
			},
			template:'<div>{{content}}</div>'
		})
		var vm = new Vue({
			el:'#root'
		});
	</script>
</body>
</html>